<template>
  <div style="margin-top: 90px"></div>
  <div class="biaoti2">
    <a-form-item style="font-size: 22pxl; margin-left: 10px">
      <span style="font-size: 19px; font-weight: 450">请选择影院: </span>
      <a-select
        v-model:value="id"
        placeholder="快来选择你要了解的影院吧！"
        @change="getCinemaById(id)"
      >
        <a-select-option
          v-for="cinema in cinemas"
          :key="cinema.cnm_id"
          :value="cinema.cnm_id"
          >{{ cinema.cnm_name }}</a-select-option
        >
      </a-select>
    </a-form-item>
  </div>
  <!-- 顶部电影信息 -->
  <div style="margin-bottom: 30px">
    <div class="banner">
      <div class="wrapper clearfix">
        <div class="cinema-left">
          <div class="avatar-shadow">
            <img
              class="avatar"
              src="https://p0.meituan.net/ugcpic/57f2aaa766e7080c62210524e8ab2213@292w_292h_1e_1c"
              alt="万达影城（石景山店）"
            />
          </div>
        </div>

        <div class="cinema-main clearfix">
          <div class="cinema-brief-container">
            <h1 class="name text-ellipsis" style="color: #fff">
              {{ cinemaParam.cnm_name }}
            </h1>
            <div class="address text-ellipsis">
              地址：{{ cinemaParam.cnm_address }}
            </div>
            <div class="telphone">电话：{{ cinemaParam.phone_number }}</div>
            <div class="telphone">
              评分：<a-rate :value="cinemaParam.cnm_score" disabled /><br />
            </div>
            <div class="features-group">
              <div class="group-title">影院服务</div>

              <div class="feature">
                <span class="tag">改签</span>
                <p
                  class="desc text-ellipsis"
                  title="未取票用户放映前60分钟可改签"
                >
                  未取票用户放映前60分钟可改签
                </p>
              </div>
              <div class="feature">
                <span class="tag">3D眼镜</span>
                <p class="desc text-ellipsis" title="免押金">免押金</p>
              </div>
              <div class="feature">
                <span class="tag">可停车</span>
                <p class="desc text-ellipsis" title="万达商业广场B2停车场">
                  {{ cinemaParam.cnm_address }}停车场
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 顶部电影信息 -->

  <section class="w3l-grids">
    <div>
      <div class="container py-lg-3">
        <div class="biaoti">电影院评论区</div>
        <div
          class="headerhny-title"
          style="
            border-style: solid;
            border-width: 0px 1px 4px 1px;
            border-color: rgba(105, 105, 105, 0.137);
          "
        >
          <div>
            <a-comment
              v-for="cnmComment in cnmComments"
              :key="cnmComment.cnm_com_id"
              class="changping"
            >
              <template #author
                ><a>{{ cnmComment.cust_username }}</a></template
              >
              <!-- <template #avatar>
      <a-avatar
        :src="cnmComment.avatar_address"
        alt="cnmComment.cust_username"
      />
    </template> -->
              <template #content>
                <a-rate :value="cnmComment.cnm_com_score" disabled />
                <p>
                  {{ cnmComment.com_text }}
                </p>
              </template>
              <template #datetime>
                <a-tooltip
                  :title="
                    moment(cnmComment.com_time).format('YYYY-MM-DD HH:mm:ss')
                  "
                >
                  <span>{{ moment(cnmComment.com_time).fromNow() }}</span>
                </a-tooltip>
              </template>
            </a-comment>
          </div>
          <a-comment>
            <a-form-item>
              <a-button type="primary" @click="openAdd">
                觉得影院不错？来评价一下吧！
              </a-button>
            </a-form-item>
          </a-comment>

          <!-- 添加弹窗 -->
          <a-modal
            v-model:visible="visible"
            title="给电影院写个评价"
            @ok="execAdd"
            width=1000px
          >
            <span>
              <a-rate v-model:value="AddParam.cnm_com_score" :tooltips="desc" />
              <span class="ant-rate-text">{{
                desc[AddParam.cnm_com_score - 1]
              }}</span>
            </span>
            <a-textarea :rows="12" v-model:value="AddParam.com_text" />
            <template #footer>
              <a-button key="submit" type="primary" @click="execAdd()"
                >提交
              </a-button>
            </template>
          </a-modal>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import moment from "moment";
import { reactive, ref } from "vue";
import { get, post, tip } from "@/common"; //基础
import { useRouter } from "vue-router";

const visible = ref(false);
const cinemas = ref({});
const cinemaParam = ref({});
const getCinemaById = (cnm_id) => {
  get("/info/cinema/cinema-list-byid", { cnm_id }).then((res) => {
    cinemaParam.value = res.data[0];
    getComment(cnm_id);
    AddParam.cnm_id = cnm_id;
  });
};
const getCinema = () => {
  get("/info/cinema/cinema-list").then((res) => {
    cinemas.value = res.data;
  });
};
getCinema();
getCinemaById(1);

//评论
const cnmComments = ref({});
const getComment = (cnm_id) => {
  get("/info/cnmComment/cnmComment-listByCnmId", { cnm_id }).then((res) => {
    cnmComments.value = res.data;
  });
};
//添加评论
const AddParam = reactive({
  cust_username: "",
  cnm_id: "",
  com_text: "",
  cnm_com_score: "",
});
const emptyAdd = () => {
  AddParam.cust_username = "";
  AddParam.com_text = "";
  AddParam.cnm_com_score = "";
};
const execAdd = () => {
  get("/user/info").then((res) => {
    console.log("cust_username:" + res.data.cust_username);
    AddParam.cust_username = res.data.cust_username;
    console.log(AddParam);
    post("/info/cnmComment/addComment", AddParam).then((res) => {
      tip.success("评论成功");
      visible.value = false;
      getComment(AddParam.cnm_id);
      get("/search/c_point/point", { cnm_id: AddParam.cnm_id }).then((res) => {
        getCinemaById(AddParam.cnm_id);
      });
      emptyAdd();
    });
  });
};
const openAdd = () => {
  visible.value = true;
};
const desc = ref([
  "太难看惹！！！",
  "难看！",
  "一般般",
  "好评！",
  "太好看惹！！！",
]);
</script>

<style scoped>
.dafen {
  float: left;
  margin-top: 36px;
  height: 65px;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #1890ff;
  padding: 4px;
}
.biaoti {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 30px;
  margin-bottom: 15px;
  width: 15%;
  border-style: solid;
  border-width: 0px 0px 4px 0px;
  border-color: rgba(24, 144, 255, 0.497);
}
.biaoti2 {
  font-size: 30px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 300px;
  margin-bottom: 15px;
  width: 20%;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: rgba(24, 144, 255, 0.497);
}
.duanping {
  border-style: solid;
  border-width: 1px 4px 4px 0px;
  border-color: #fff;
  width: 300px;
  height: 150px;
  display: inline-block;
  background-color: rgba(105, 105, 105, 0.057);
  padding: 10px;
}
.changping {
  border-style: solid;
  border-width: 2px 4px 4px 2px;
  border-color: #fff;
  height: auto;
  background-color: rgba(105, 105, 105, 0.03);
  padding: 10px;
}
.ant-btn-primary {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ant-btn-red {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
</style>